<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { eventCenter, getCurrentInstance } from '@tarojs/taro';
import { QUERY_USER_AREA } from '/@/api/modules/base/sys-user';
import MY_LOCATION from '/@/assets/image/icon/my-location.png';
const state: {
  /**
   * 区域ID(扫区域码后更新)
   */
  areaId?: string;
  /**
   * 区域名称(扫区域码后更新)
   */
  areaName?: string;
} = reactive({
  areaId: '',
  areaName: '',
});
function queryUserArea() {
  QUERY_USER_AREA({}).then((res) => {
    state.areaId = res.areaId;
    state.areaName = res.areaName;
  });
}
onMounted(() => {
  queryUserArea();
  eventCenter.on(getCurrentInstance().router?.onShow as string, () => {
    queryUserArea();
  });
});
</script>
<template>
  <view class="home-logistics-location">
    <view class="home-logistics-location__content">
      <image :src="MY_LOCATION" class="home-logistics-location__image" />
      <text>当前位置:&nbsp;&nbsp;{{ state.areaName }}</text>
    </view>
  </view>
</template>
<style lang="scss">
.home-logistics-location {
  background-color: #fff;
  margin-bottom: 20px;
  padding: 20px;
  display: flex;
  justify-content: center;
  &__content {
    font-size: 26px;
    color: #333;
  }

  &__image {
    height: 26px;
    width: 25px;
    margin-right: 10px;
  }
}
</style>
